<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d2{
            /*行内元素没有宽高的设置 需要进行转换*/
            display: inline-block;
            width: 1000px;
            height: 20px;
            border: 1px red solid;
        }
        #d3{
            /*行内元素没有宽高的设置 需要进行转换*/
            display: inline-block;
            background-color: green;
            height: 20px;
        }
    </style>
</head>
<body>
<input type="button" value="开始" onclick="startGame(this)">
<span id="d1">
    <span id="d2">
        <span id="d3"></span>
    </span>
</span>
</body>
<script>
    function startGame(t) {
        /*
        1.打开页面屏幕随机显示星星
        2.点击星星让其消失
         */
        // t.setAttribute('onclick','pauseGame(this)');
        t.onclick = pauseGame;

        let time = 1;
        t.value = '游戏进行了1秒，点击暂停';

        count = 0;//全局 用于记录星星数

        let timeDsq = setInterval(function () {
            time++;
            t.value = '游戏进行了' + time +'秒，点击暂停';

        },1000);

        let xingxing = setInterval(function () {
            let obj = document.createElement('img');
            obj.src = 'img/star.gif';
            let sq = Math.floor(Math.random()*(150-5)+5);
            obj.style.width = sq + 'px';
            obj.style.height = sq + 'px';
            obj.style.position = 'absolute';
            obj.style.top = Math.floor(Math.random()*screen.height) + 'px';
            obj.style.left = Math.floor(Math.random()*screen.width)  + 'px';
            //绑定点击事件  this可以直接在函数里面使用
            obj.addEventListener("click", removeStar,false);
            //向body加入子节点
            document.body.appendChild(obj);
            count++;

            //获取d3 进度条增加
            let spanWidth = document.getElementById('d3');
            spanWidth.style.width = count * 5 + 'px';

            //收尾阶段
            if (count > 200){
                clearInterval(xingxing);
                clearInterval(timeDsq);
                t.value = '游戏结束';
                spanWidth.style.width = (count-1) * 5 + 'px';

                //粗暴消除按钮点击事件
                t.onclick = alert('GameOver');

                //优雅地解除每张星星的点击事件
                let imgAll = document.getElementsByTagName('img');
                for (let i = 0;i<imgAll.length;i++)
                    //若为false,函数在冒泡阶段执行;若为true,函数在捕获阶段执行。默认为false。
                    imgAll[i].removeEventListener("click", removeStar,false);
            }
        },400)
    }

    //清除星星
    function removeStar() {
        //获取星星（图片）的父节点（body） 然后移除this本身（被点击的对象/图片/节点）
        this.parentNode.removeChild(this);
        count--;
        //获取d3 进度条减少 count-- 就代表长度短了
        let spanWidth = document.getElementById('d3');
        spanWidth.style.width = count * 5 + 'px';

    }

    function pauseGame(t) {
        alert('暂停中');
    }

</script>
</html>